/* component */
import { BaseSelectUserDynamic } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useSelectUserCheckedItemList } from '@src/component/common/BaseSelectUser/hooks'
/* scss */
import '@src/component/common/BaseSelectUser/components/Dynamic/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent } from 'vue'
import { CreateElement } from 'vue'
/* model */
import { CommonComponentInstance } from '@model/VC'
/* types */
import { BaseSelectUserSelectedItemType } from '@src/component/common/BaseSelectUser/types'

export type DynamicTabProps = {

}

export interface DynamicTabSetupState {
  
}

export enum DynamicTabEmitEventNameEnum {
  Input = 'input'
}

export type DynamicTabInstance = ComponentInstance & DynamicTabSetupState
export type DynamicTabVM = ComponentRenderProxy<DynamicTabProps> & CommonComponentInstance & DynamicTabInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserDynamicTab,
  emits: [
    DynamicTabEmitEventNameEnum.Input
  ],
  setup(props: DynamicTabProps, { emit }) {
    
    const { removeCheckedItem, addCheckedItem } = useSelectUserCheckedItemList()
    
    const onAddUserHandler = (item: BaseSelectUserSelectedItemType) => {
      addCheckedItem(item)
    }
    
    const onRemoveUserHandler = (item: BaseSelectUserSelectedItemType) => {
      removeCheckedItem(item)
    }
    
    return {
      onAddUserHandler,
      onRemoveUserHandler
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserDynamicTab}>
        <BaseSelectUserDynamic
          onAdd={this.onAddUserHandler}
          onRemove={this.onRemoveUserHandler}
        />
      </div>
    )
  }
})
